<template>
  <a-modal
    v-model="visible"
    width="1000px"
    :bodyStyle="{ padding: '10px' }"
    title="入库"    
  >      
    <div>
      <a-form-model :model="dataForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="素材编码">
              <a-input v-model="dataForm.createUserNo" allowClear placeholder="请输入"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="素材名称">
              <a-input v-model="dataForm.createUserName" allowClear placeholder="请输入"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-button class="hte-btn" type="primary" @click="loadList(1)">搜索</a-button>           
          </a-col>
        </a-row>
      </a-form-model>
      <div class="mt20">
        <div class="content">
          <div v-for="item of tableData" :key="item.id">
            <a-checkbox
              :value="item.id"
              @change="checkBoxChange"
              :checked="selectedRowKeys.indexOf(item.id) >= 0"
            ></a-checkbox>
            <div class="img"><img src="@/assets/dbcircle.png"></div>
            <p>{{item.applyDeptName}}</p>
            <p>{{item.orderTypeDes}}</p>
          </div>
        </div>
        <a-pagination   
          class="pagina-card"                        
          v-model="ipagination.current"
          size="small"
          show-size-changer
          :showTotal="ipagination.showTotal"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          :pageSizeOptions="ipagination.pageSizeOptions"
          @change="handleListChange"
          @showSizeChange="handleListChange"
        />
      </div>      
    </div>
    <template slot="footer">
      <div class="footer-line">
        <a-button  @click="handleCancel">关 闭</a-button>      
        <a-button type="primary" @click="handleOk">确 定</a-button>
        <a-button type="primary" @click="handleAdd">新 建</a-button>
      </div>
    </template>
  </a-modal> 
</template>
<script>
import {postAction} from '@/api/manage'

export default {
  name: 'UpMaterialModal',
  props: {
  },
  data() {
    return {
      visible: false,
      dataForm: {},
      
      tableData: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        name: '',
      },
      selectedRowKeys: [],
      loading: false,
      url: {
        list: '/hteLibMediaOrder/list',
      },
    }
  },
  mounted() {
  },
  methods: {
    showLog(type,fileId) {
      this.visible = true
      this.ipagination.fileId=fileId
      this.ipagination.current = 1;
      this.ipagination.pageNo = 1;
      this.$set(this.ipagination,'operateType',type)
      this.loadList()
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      console.log(this.selectedRowKeys)
      // this.handleCancel()
    },
    handleAdd(){

    },
    loadList(pageNo) {
      this.loading = true
      if(!!pageNo){
        this.ipagination.current = pageNo;
        this.ipagination.pageNo = pageNo;
      }
      this.ipagination.createUserName = this.dataForm.createUserName
      this.ipagination.createUserNo = this.dataForm.createUserNo

      let param = Object.assign({}, this.ipagination)      
      delete param.pageSizeOptions
      delete param.showTotal
      postAction(this.url.list, param).then((res) => {
        if (res.success) {
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          this.tableData = res.result.records
        } else {
          this.$message.error(res.message)
        }
        this.loading = false
      })
    },
    handleListChange(page,pageSize){
      this.ipagination.pageSize = pageSize
      this.ipagination.current = page
      this.ipagination.pageNo = page
      this.loadList()
    },
    checkBoxChange(e) {
      if (e.target.checked) {
        this.selectedRowKeys.push(e.target.value);
      } else {
        const idx = this.selectedRowKeys.findIndex(v => v === e.target.value);
        this.selectedRowKeys.splice(idx, 1);
      }
    },
  },
}
</script>
<style lang="less" scoped>
  .mt20{margin-top: 20px;padding-top: 20px;border-top: 1px solid #ddd;}
  .hte-btn{margin-top:4px}
  .content{display: flex;flex-wrap: wrap;
    >div{width: calc((100% - 70px) / 5);padding: 10px;border: 1px solid #E6E6E6;border-radius: 4px;margin: 0 7px 14px;display: flex;
    align-items: center;flex-wrap: wrap;justify-content: center;position:relative;
      .img{width: 90%;height: 16vh;min-height: 150px;background: #EEEEEE;
        img{width: 100%;height: 100%;vertical-align: middle;}
      }
      >p{margin-bottom: 0;width: 100%;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
    }
    /deep/ .ant-checkbox-wrapper{position: absolute;left:25px;top:19px;}
  }
  .pagina-card{text-align: right;margin-top:10px}
</style>
